<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobila banken</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="styles/my.css" />
</head>
<body>
	<h1>SPLASHSCREEN!</h1>
	<script type="text/x-handlebars" data-template-name="overview">    
    	{{#view AccountOverview.HeaderView}}
	        <h3>
                Mobila Banken
            </h3>
	    {{/view}}
    
    	{{#view AccountOverview.ContentView}}
			<!-- how can we move this? -->
			<div class="disableable">
				<ul data-role="listview" data-divider-theme="b" data-inset="true" id="accountlist">
					<li data-role="list-divider" role="heading">
						Konton
					</li>
		            {{#each AccountOverview.overviewController}}
    		            {{#view AccountOverview.AccountView contentBinding="this"}}
        		            <a href="#accountdetails" data-transition="slide" {{bindAttr data-identity="content.arrangementId"}} {{action "linkClicked" on="click"}} class="ui-link-inherit">
            		            <b> {{content.customerArrangementName}} </b> - {{content.arrangementId}}
                		    </a>
	                	{{/view}}
    	       		{{/each}}
				</ul>
			</div>
    	{{/view}}
   	</script>

	<div data-role="page" id="accountdetails">
		<div id="heaader" data-role="header">
			<h3>Mobila Banken</h3>
			<a data-role="button" data-transition="slide" data-rel="back"
				href="#overview" data-icon="back" data-iconpos="bottom"> </a>
		</div>
		<script type="text/x-handlebars">
		<div data-role="navbar" data-iconpos="top" class="ui-navbar" role="navigation">	
			<ul class="ui-grid-a">	
				<li class="ui-block-a"><a href="#" {{action "viewTransactions" target="AccountOverview.transactionController"}} data-theme="c" data-icon="" {{bindAttr class="AccountOverview.isAccountTransactionsLoaded:ui-btn-active AccountOverview.isAccountDetailsLoaded:ui-btn-up-c :ui-btn ui-btn-inline ui-btn-icon-top"}} data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true"><span class="ui-btn-inner"><span class="ui-btn-text"> Transaktioner </span></span></a></li>
				<li class="ui-block-b"><a href="#" {{action "viewDetails" target="AccountOverview.transactionController"}} data-theme="c" data-icon="" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-inline="true" {{bindAttr class="AccountOverview.isAccountDetailsLoaded:ui-btn-active AccountOverview.isAccountTransactionsLoaded:ui-btn-up-c :ui-btn ui-btn-inline ui-btn-icon-top"}}><span class="ui-btn-inner"><span class="ui-btn-text">
					Information </span></span></a></li>	
			</ul>
		</div>
		
        {{#view AccountOverview.ContentView}}
			{{#if AccountOverview.isAccountDetailsLoaded}}
                {{#collection contentBinding="AccountOverview.accountDetailsController" }}

					<li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right"
						class="ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-c ui-corner-all ui-shadow"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">

                        <p style="padding-left: 20px">
                            <b>Kontonummer: {{content.arrangementId}}</b> </br>
							Kontonamn: {{content.customerName}} </br>
							Kontotyp: {{content.type}} </br>
							Ränta: {{content.interestRate}}% </br>
							Saldo: {{content.balance}} kr </br>
							Kredit: {{content.credit}} kr</br>
							Tillgängligt belopp: {{content.availableAmount}} kr
                        </p>
                   </li> 

				{{/collection}}               
            {{else}}
				<div class="disableable">
                 <ul data-role="listview" data-divider-theme="b" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
					{{#each AccountOverview.transactionController}}

						{{#view AccountOverview.TransactionView contentBinding="this"}}
						 <li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" 
                        	  data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" class="ui-btn ui-btn-icon-right 
                          	  ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">

                          	<a href="#transactiondetails" data-transition="slide" {{bindAttr data-identity="content.id"}} {{action "linkClicked" on="click"}} class="ui-link-inherit">
                             <b> {{content.text}}</b>: {{content.amount}}
                            </a>

                        </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li> 
						{{/view}}

					{{/each}}
                </ul>
                {{#if AccountOverview.transactionController.isLoaded}}
                    <div>
                        <center>                
                            {{#if AccountOverview.transactionController.moreTransactionsExist}}
                                <a href="#" data-transition="fade" {{action "loadMoreTransactions" target="AccountOverview.transactionController"}}>
                                    Visa fler transaktioner
                                </a>
                            {{else}}
                                Alla tillgängliga transaktioner för detta konto har hämtats.
                            {{/if}}
                        </center>
                    </div>
                {{/if}}
			</div>
        {{/if}}
    {{/view}}
		
	    </script>
	</div>

	<div data-role="page" id="transactiondetails">
		<div data-theme="a" data-role="header">
			<h3>Mobila Banken</h3>
			<a data-role="button" data-rel="back" data-transition="slide"
				href="#" data-icon="back" data-iconpos="bottom"> </a>
		</div>
		<div data-role="content">
		<script type="text/x-handlebars">
       	 {{#view AccountOverview.ContentView}}
			  <div class="disableable">
					<ul data-role="listview" data-divider-theme="b" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">

				        {{#collection contentBinding="AccountOverview.transactionDetailsController" }}
						<li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right"
							class=" ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
								<p style="padding-left: 20px">
                              	<b> {{content.text}}</b> </br>
							    Summa: {{content.amount}} kr</br>
								Verifieringsnr: {{content.verificationNumber}} </br>
								Valuedate: {{content.valueDate}} </br>
								Bookingdate: {{content.bookingDate}}
								</p>
                       	</li>
						{{/collection}}

               	   </ul>
			 </div>
	  	 {{/view}}
		</script>
		</div>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
	<script src="js/ember-0.9.7.1.js"></script>
	<script src="js/application.js"></script>
	<script type="text/javascript" src="js/converter.js"></script>
</body>
</html>